<template>
  <div class="job_detail">
    <div class="header">
      <div class="content" > 
        <div class="row1">招聘中</div>
        <div class="row2">
          <div class="title">
            <span>{{jobDetail.jobName}}</span>
            <span>{{(jobDetail.minWage/1000).toFixed(1)}}k-{{(jobDetail.maxWage/1000).toFixed(1)}}K</span>
          </div>
          <div class="tag">
            <div  v-for="(p,i) of jobDetail.tags" :key="i">{{p}}</div>
          </div>
        </div>
        <div class="row3">
          <div>招聘职位数量：{{jobDetail.jobNum}}</div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="content">
        <div class="left">
          <div class="row1">
            <div class="headImg">
               <img :src="jobDetail.headImg" alt="" />
            </div>
            <div class="info">
                <div><b>{{jobDetail.name}}</b></div>
              <span>{{jobDetail.position}}</span>
            </div>
            <a-button class="BTN" @click="send">立即投递</a-button>
          </div>
          <div class="row2">
            <h3>职位描述</h3>
            <div class="description">
              <p>
                {{jobDetail.desc}}
              </p>
            </div>
            <h3>联系方式</h3>
           <div>
              <span style="margin:10px">联系电话</span> {{jobDetail.phone}}
           </div>
             <h3>工作地点</h3>
             <div class="workspace">
               {{jobDetail.city}}市 {{jobDetail.address}}
             </div>
          </div>
        </div>
        <div class="right">
          <h3>公司基本信息</h3>
          <div class="info">
            <div class="row1">
              <div class="headImg">
                <img :src="jobDetail.logo" alt="" />
              </div>
              <div class="name">
                <b>{{jobDetail.compName}}</b>
              </div>
            </div>
            <div class="row2">
              <div>
                <a-icon type="appstore" /> <span class="count"> {{COMPTYPEMAP[jobDetail.compType]}}</span>
              </div>
              <div>
                <a-icon type="team" /> <span class="count"> {{COMPPEOPLEMAP[jobDetail.peopleNum]}}人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './styles.less'
import jobAPI from '../../services/job'
import { requestWrapper } from '../../utils/request'
import {COMPTYPEMAP, COMPPEOPLEMAP} from '../../const/const'
export default {
  data() {
    return {
      selectedKeys: '1',
      jobId: '',
      jobDetail: {},
      COMPTYPEMAP: COMPTYPEMAP,
      COMPPEOPLEMAP: COMPPEOPLEMAP,
    };
  },
  methods: {
    send() {
      requestWrapper( jobAPI.send.bind(null, {jobId: this.jobId}), {
        formatDataFn: (res) => res,
          autoSuccess: true,
          successMessage: '投递成功！',
      }).then((res) => {
          console.log(res);
      })
    }
  },
  mounted() {
    this.jobId = this.$route.query.jobId;
    console.log(this.jobId);
    requestWrapper( jobAPI.jobDetail.bind(null, {jobId: this.jobId}), {
      formatDataFn: res => res
    }).then((res) => {
        console.log(res);
        this.jobDetail = res.result
    })
  }
}
</script>
